import React, { useEffect, useState } from 'react';
import Minlb from '../Materialsc/minlb/minlb'
import { Col, Row, Tabs } from 'antd';
import { Button } from "antd";
import { Overlay, NavBar, Cell, Field, Input } from 'react-vant';
import CreateList from './CreateList/createList';
import { useNavigate } from 'react-router-dom';
// import { getlist } from '../../api';
function Create() {
  const [visible, setVisible] = useState(false);
  // tab切换
  const onChange = (key) => {
    console.log(key);
  };
  const creatlist = [
    'https://pub-cdn-oss.chuangkit.com/designKind/177?v=1736753531447&imageMogr2%2Fformat%2Fwebp',
    'https://pub-cdn-oss.chuangkit.com/designKind/152?v=1736753531447&imageMogr2%2Fformat%2Fwebp',
    'https://pub-cdn-oss.chuangkit.com/designKind/630?v=1736753531449&imageMogr2%2Fformat%2Fwebp',
    'https://pub-cdn-oss.chuangkit.com/designKind/694?v=1736753531447&imageMogr2%2Fformat%2Fwebp',
    'https://pub-cdn-oss.chuangkit.com/designKind/505?v=1736753531448&imageMogr2%2Fformat%2Fwebp',
    'https://pub-cdn-oss.chuangkit.com/designKind/209?v=1736753531448&imageMogr2%2Fformat%2Fwebp',
    'https://pub-cdn-oss.chuangkit.com/designKind/235?v=1736753531447&imageMogr2%2Fformat%2Fwebp',
    'https://pub-cdn-oss.chuangkit.com/designKind/232?v=1736753531447&imageMogr2%2Fformat%2Fwebp'
  ]
  const creatlist2 = [
    'https://pub-cdn-oss.chuangkit.com/designKind/694?v=1736753531447&imageMogr2%2Fformat%2Fwebp',
    'https://pub-cdn-oss.chuangkit.com/designKind/505?v=1736753531448&imageMogr2%2Fformat%2Fwebp',
    'https://pub-cdn-oss.chuangkit.com/designKind/209?v=1736753531448&imageMogr2%2Fformat%2Fwebp',
    'https://pub-cdn-oss.chuangkit.com/designKind/235?v=1736753531447&imageMogr2%2Fformat%2Fwebp',
    'https://pub-cdn-oss.chuangkit.com/designKind/232?v=1736753531447&imageMogr2%2Fformat%2Fwebp'
  ]
  const creatlist3 = [
    'https://pub-cdn-oss.chuangkit.com/designKind/502?v=1736753531447&imageMogr2%2Fformat%2Fwebp',
    'https://pub-cdn-oss.chuangkit.com/designKind/1044?v=1736753531446&imageMogr2%2Fformat%2Fwebp',
    'https://pub-cdn-oss.chuangkit.com/designKind/731?v=1736753531447&imageMogr2%2Fformat%2Fwebp',
    'https://pub-cdn-oss.chuangkit.com/designKind/235?v=1736753531447&imageMogr2%2Fformat%2Fwebp',
    'https://pub-cdn-oss.chuangkit.com/designKind/232?v=1736753531447&imageMogr2%2Fformat%2Fwebp',
    'https://pub-cdn-oss.chuangkit.com/designKind/618?v=1736753531446&imageMogr2%2Fformat%2Fwebp',
  ]
  const creatlist4 = [
    'https://pub-cdn-oss.chuangkit.com/designKind/630?v=1736753531449&imageMogr2%2Fformat%2Fwebp',
    'https://pub-cdn-oss.chuangkit.com/designKind/694?v=1736753531447&imageMogr2%2Fformat%2Fwebp',
    'https://pub-cdn-oss.chuangkit.com/designKind/505?v=1736753531448&imageMogr2%2Fformat%2Fwebp',
    'https://pub-cdn-oss.chuangkit.com/designKind/209?v=1736753531448&imageMogr2%2Fformat%2Fwebp',
  ]
  const creatlist5 = [
    'https://pub-cdn-oss.chuangkit.com/designKind/29?v=1736753531449&imageMogr2%2Fformat%2Fwebp',
    'https://pub-cdn-oss.chuangkit.com/designKind/503?v=1736753531449&imageMogr2%2Fformat%2Fwebp',
    'https://pub-cdn-oss.chuangkit.com/designKind/572?v=1736753531449&imageMogr2%2Fformat%2Fwebp',
    'https://pub-cdn-oss.chuangkit.com/designKind/540?v=1736753531449&imageMogr2%2Fformat%2Fwebp',
    'https://pub-cdn-oss.chuangkit.com/designKind/29?v=1736753531449&imageMogr2%2Fformat%2Fwebp',
  ]
  const creatlist6 = [
    'https://pub-cdn-oss.chuangkit.com/designKind/148?v=1736753531449&imageMogr2%2Fformat%2Fwebp',
    'https://pub-cdn-oss.chuangkit.com/designKind/23?v=1736753531447&imageMogr2%2Fformat%2Fwebp',
    'https://pub-cdn-oss.chuangkit.com/designKind/177?v=1736753531447&imageMogr2%2Fformat%2Fwebp',
    'https://pub-cdn-oss.chuangkit.com/designKind/152?v=1736753531447&imageMogr2%2Fformat%2Fwebp',
    'https://pub-cdn-oss.chuangkit.com/designKind/630?v=1736753531449&imageMogr2%2Fformat%2Fwebp',
  ]
  const creatlist7 = [
    'https://pub-cdn-oss.chuangkit.com/designKind/232?v=1736753531447&imageMogr2%2Fformat%2Fwebp',
    'https://pub-cdn-oss.chuangkit.com/designKind/502?v=1736753531447&imageMogr2%2Fformat%2Fwebp',
    'https://pub-cdn-oss.chuangkit.com/designKind/1044?v=1736753531446&imageMogr2%2Fformat%2Fwebp',
    'https://pub-cdn-oss.chuangkit.com/designKind/731?v=1736753531447&imageMogr2%2Fformat%2Fwebp',
    'https://pub-cdn-oss.chuangkit.com/designKind/618?v=1736753531446&imageMogr2%2Fformat%2Fwebp',
  ]
  const creatlist8 = [
    'https://pub-cdn-oss.chuangkit.com/designKind/630?v=1736753531449&imageMogr2%2Fformat%2Fwebp',
    'https://pub-cdn-oss.chuangkit.com/designKind/694?v=1736753531447&imageMogr2%2Fformat%2Fwebp',
    'https://pub-cdn-oss.chuangkit.com/designKind/505?v=1736753531448&imageMogr2%2Fformat%2Fwebp',
    'https://pub-cdn-oss.chuangkit.com/designKind/209?v=1736753531448&imageMogr2%2Fformat%2Fwebp',
  ]
  const creatlist9 = [
    'https://pub-cdn-oss.chuangkit.com/designKind/148?v=1736753531449&imageMogr2%2Fformat%2Fwebp',
    'https://pub-cdn-oss.chuangkit.com/designKind/23?v=1736753531447&imageMogr2%2Fformat%2Fwebp',
    'https://pub-cdn-oss.chuangkit.com/designKind/177?v=1736753531447&imageMogr2%2Fformat%2Fwebp',
    'https://pub-cdn-oss.chuangkit.com/designKind/152?v=1736753531447&imageMogr2%2Fformat%2Fwebp',
    'https://pub-cdn-oss.chuangkit.com/designKind/630?v=1736753531449&imageMogr2%2Fformat%2Fwebp',
    'https://pub-cdn-oss.chuangkit.com/designKind/694?v=1736753531447&imageMogr2%2Fformat%2Fwebp',
    'https://pub-cdn-oss.chuangkit.com/designKind/505?v=1736753531448&imageMogr2%2Fformat%2Fwebp',
    'https://pub-cdn-oss.chuangkit.com/designKind/209?v=1736753531448&imageMogr2%2Fformat%2Fwebp',
    'https://pub-cdn-oss.chuangkit.com/designKind/235?v=1736753531447&imageMogr2%2Fformat%2Fwebp',
  ]
  const creatlist10 = [
    'https://pub-cdn-oss.chuangkit.com/designKind/29?v=1736753531449&imageMogr2%2Fformat%2Fwebp',
    'https://pub-cdn-oss.chuangkit.com/designKind/503?v=1736753531449&imageMogr2%2Fformat%2Fwebp',
    'https://pub-cdn-oss.chuangkit.com/designKind/302?v=1736753531449&imageMogr2%2Fformat%2Fwebp',
    'https://pub-cdn-oss.chuangkit.com/designKind/1036?v=1736753531449&imageMogr2%2Fformat%2Fwebp',
  ]
  const items = [
    {
      key: '1',
      label: '全部',
      children: <>
        <h3>收藏场景</h3>
        <Minlb />
        <h3>智能设计</h3>
        <Minlb />
        <CreateList />
      </>,
    },
    {
      key: '2',
      label: '智能设计',
      children: <>
        <h3>智能设计</h3>
        <CreateList />
      </>,
    }, {
      key: '3',
      label: '海报',
      children: <>
        <h3>海报</h3>
        <div>
          {creatlist.map((item, index) => (
            <div key={index} style={{ width: "13%", float: 'left', height: '200px', background: '#f5f7fd', margin: '0.7rem', display: 'flex', justifyContent: 'center', alignItems: 'center', borderRadius: '5%' }}>
              <img src={item} alt="" style={{ width: "0 auto", height: 'auto', maxWidth: '80%', maxHeight: '70%' }} />
            </div>

          ))}
        </div>
      </>,
    }, {
      key: '4',
      label: '公众号',
      children: <>
        <h3>公众号</h3>
        <div>
          {creatlist2.map((item, index) => (
            <div key={index} style={{ width: "13%", float: 'left', height: '200px', background: '#f5f7fd', margin: '0.7rem', display: 'flex', justifyContent: 'center', alignItems: 'center', borderRadius: '5%' }}>
              <img src={item} alt="" style={{ width: "0 auto", height: 'auto', maxWidth: '80%', maxHeight: '70%' }} />
            </div>

          ))}
        </div>
      </>,
    }, {
      key: '5',
      label: '抖音/小红书',
      children: <>
        <h3>抖音/小红书</h3>
        <div>
          {creatlist3.map((item, index) => (
            <div key={index} style={{ width: "13%", float: 'left', height: '200px', background: '#f5f7fd', margin: '0.7rem', display: 'flex', justifyContent: 'center', alignItems: 'center', borderRadius: '5%' }}>
              <img src={item} alt="" style={{ width: "0 auto", height: 'auto', maxWidth: '80%', maxHeight: '70%' }} />
            </div>

          ))}
        </div>
      </>,
    }, {
      key: '6',
      label: '电商',
      children: <>
        <h3>电商</h3>
        <div>
          {creatlist4.map((item, index) => (
            <div key={index} style={{ width: "13%", float: 'left', height: '200px', background: '#f5f7fd', margin: '0.7rem', display: 'flex', justifyContent: 'center', alignItems: 'center', borderRadius: '5%' }}>
              <img src={item} alt="" style={{ width: "0 auto", height: 'auto', maxWidth: '80%', maxHeight: '70%' }} />
            </div>

          ))}
        </div>
      </>,
    }, {
      key: '7',
      label: 'PPT/办公',
      children: <>
        <h3>PPT/办公</h3>
        <div>
          {creatlist5.map((item, index) => (
            <div key={index} style={{ width: "13%", float: 'left', height: '200px', background: '#f5f7fd', margin: '0.7rem', display: 'flex', justifyContent: 'center', alignItems: 'center', borderRadius: '5%' }}>
              <img src={item} alt="" style={{ width: "0 auto", height: 'auto', maxWidth: '80%', maxHeight: '70%' }} />
            </div>

          ))}
        </div>
      </>,
    }, {
      key: '8',
      label: '印刷物料',
      children: <>
        <h3>印刷物料</h3>
        <div>
          {creatlist6.map((item, index) => (
            <div key={index} style={{ width: "13%", float: 'left', height: '200px', background: '#f5f7fd', margin: '0.7rem', display: 'flex', justifyContent: 'center', alignItems: 'center', borderRadius: '5%' }}>
              <img src={item} alt="" style={{ width: "0 auto", height: 'auto', maxWidth: '80%', maxHeight: '70%' }} />
            </div>

          ))}
        </div>
      </>,
    }, {
      key: '9',
      label: 'H5',
      children: <>
        <h3>H5</h3>
        {creatlist7.map((item, index) => (
          <div key={index} style={{ width: "13%", float: 'left', height: '200px', background: '#f5f7fd', margin: '0.7rem', display: 'flex', justifyContent: 'center', alignItems: 'center', borderRadius: '5%' }}>
            <img src={item} alt="" style={{ width: "0 auto", height: 'auto', maxWidth: '80%', maxHeight: '70%' }} />
          </div>

        ))}
      </>,
    }, {
      key: '10',
      label: '社会生活',
      children: <>
        <h3>社会生活</h3>
        <div>
          {creatlist8.map((item, index) => (
            <div key={index} style={{ width: "13%", float: 'left', height: '200px', background: '#f5f7fd', margin: '0.7rem', display: 'flex', justifyContent: 'center', alignItems: 'center', borderRadius: '5%' }}>
              <img src={item} alt="" style={{ width: "0 auto", height: 'auto', maxWidth: '80%', maxHeight: '70%' }} />
            </div>

          ))}
        </div>
      </>,
    }, {
      key: '11',
      label: '视频',
      children: <>
        <h3>视频</h3>
        <div>
          {creatlist9.map((item, index) => (
            <div key={index} style={{ width: "13%", float: 'left', height: '200px', background: '#f5f7fd', margin: '0.7rem', display: 'flex', justifyContent: 'center', alignItems: 'center', borderRadius: '5%' }}>
              <img src={item} alt="" style={{ width: "0 auto", height: 'auto', maxWidth: '80%', maxHeight: '70%' }} />
            </div>

          ))}
        </div>
      </>,
    }, {
      key: '12',
      label: '插画元素',
      children: <>
        <h3>插画元素</h3>

        {creatlist10.map((item, index) => (
          <div key={index} style={{ width: "13%", float: 'left', height: '200px', background: '#f5f7fd', margin: '0.7rem', display: 'flex', justifyContent: 'center', alignItems: 'center', borderRadius: '5%' }}>
            <img src={item} alt="" style={{ width: "0 auto", height: 'auto', maxWidth: '80%', maxHeight: '70%' }} />
          </div>

        ))}

      </>,
    },
  ];
  // 弹框的tab
  const itemstk = [
    {
      key: '1',
      label: 'pc端',
      children: <>
        <ul>
          <li style={{ width: '18%', border: '1px solid rgb(183, 183, 183)', borderRadius: '1rem', marginLeft: '0.8rem', float: 'left', lineHeight: '2rem' }}>
            <b style={{ float: 'left', marginLeft: '0.3rem' }}>16:9</b><br /><span style={{ float: 'left', marginLeft: '0.3rem' }}>1366 x 768px</span>
          </li>
          <li style={{ width: '18%', border: '1px solid rgb(183, 183, 183)', borderRadius: '1rem', marginLeft: '0.8rem', float: 'left', lineHeight: '2rem' }}>
            <b style={{ float: 'left', marginLeft: '0.3rem' }}>16:9</b><br /><span style={{ float: 'left', marginLeft: '0.3rem' }}>1366 x 768px</span>
          </li>
          <li style={{ width: '18%', border: '1px solid rgb(183, 183, 183)', borderRadius: '1rem', marginLeft: '0.8rem', float: 'left', lineHeight: '2rem' }}>
            <b style={{ float: 'left', marginLeft: '0.3rem' }}>16:9</b><br /><span style={{ float: 'left', marginLeft: '0.3rem' }}>1366 x 768px</span>
          </li>
          <li style={{ width: '18%', border: '1px solid rgb(183, 183, 183)', borderRadius: '1rem', marginLeft: '0.8rem', float: 'left', lineHeight: '2rem' }}>
            <b style={{ float: 'left', marginLeft: '0.3rem' }}>16:9</b><br /><span style={{ float: 'left', marginLeft: '0.3rem' }}>1366 x 768px</span>
          </li>
          <li style={{ width: '18%', border: '1px solid rgb(183, 183, 183)', borderRadius: '1rem', marginLeft: '0.8rem', float: 'left', lineHeight: '2rem' }}>
            <b style={{ float: 'left', marginLeft: '0.3rem' }}>16:9</b><br /><span style={{ float: 'left', marginLeft: '0.3rem' }}>1366 x 768px</span>
          </li>
        </ul>
      </>,
    },
    {
      key: '2',
      label: '移动端',
      children: <>
        <ul>
          <li style={{ width: '14%', border: '1px solid rgb(183, 183, 183)', borderRadius: '1rem', marginLeft: '0.8rem', float: 'left', lineHeight: '2rem' }}>
            <b style={{ float: 'left', marginLeft: '0.3rem' }}>Iphone</b><br /><span style={{ float: 'left', marginLeft: '0.3rem' }}>1366 x 768px</span>
          </li>
          <li style={{ width: '14%', border: '1px solid rgb(183, 183, 183)', borderRadius: '1rem', marginLeft: '0.8rem', float: 'left', lineHeight: '2rem' }}>
            <b style={{ float: 'left', marginLeft: '0.3rem' }}>Iphone</b><br /><span style={{ float: 'left', marginLeft: '0.3rem' }}>1366 x 768px</span>
          </li>
          <li style={{ width: '14%', border: '1px solid rgb(183, 183, 183)', borderRadius: '1rem', marginLeft: '0.8rem', float: 'left', lineHeight: '2rem' }}>
            <b style={{ float: 'left', marginLeft: '0.3rem' }}>Iphone</b><br /><span style={{ float: 'left', marginLeft: '0.3rem' }}>1366 x 768px</span>
          </li>
          <li style={{ width: '14%', border: '1px solid rgb(183, 183, 183)', borderRadius: '1rem', marginLeft: '0.8rem', float: 'left', lineHeight: '2rem' }}>
            <b style={{ float: 'left', marginLeft: '0.3rem' }}>Iphone</b><br /><span style={{ float: 'left', marginLeft: '0.3rem' }}>1366 x 768px</span>
          </li>
          <li style={{ width: '14%', border: '1px solid rgb(183, 183, 183)', borderRadius: '1rem', marginLeft: '0.8rem', float: 'left', lineHeight: '2rem' }}>
            <b style={{ float: 'left', marginLeft: '0.3rem' }}>Iphone</b><br /><span style={{ float: 'left', marginLeft: '0.3rem' }}>1366 x 768px</span>
          </li>
          <li style={{ width: '14%', border: '1px solid rgb(183, 183, 183)', borderRadius: '1rem', marginLeft: '0.8rem', float: 'left', lineHeight: '2rem' }}>
            <b style={{ float: 'left', marginLeft: '0.3rem' }}>Iphone</b><br /><span style={{ float: 'left', marginLeft: '0.3rem' }}>1366 x 768px</span>
          </li>
        </ul>
      </>,
    },
    {
      key: '3',
      label: '印刷',
      children: <>
        <ul>
          <li style={{ width: '14%', border: '1px solid rgb(183, 183, 183)', borderRadius: '1rem', marginLeft: '0.8rem', float: 'left', lineHeight: '2rem' }}>
            <b style={{ float: 'left', marginLeft: '0.3rem' }}>A4</b><br /><span style={{ float: 'left', marginLeft: '0.3rem' }}>1366 x 768px</span>
          </li>
          <li style={{ width: '14%', border: '1px solid rgb(183, 183, 183)', borderRadius: '1rem', marginLeft: '0.8rem', float: 'left', lineHeight: '2rem' }}>
            <b style={{ float: 'left', marginLeft: '0.3rem' }}>A4</b><br /><span style={{ float: 'left', marginLeft: '0.3rem' }}>1366 x 768px</span>
          </li>
          <li style={{ width: '14%', border: '1px solid rgb(183, 183, 183)', borderRadius: '1rem', marginLeft: '0.8rem', float: 'left', lineHeight: '2rem' }}>
            <b style={{ float: 'left', marginLeft: '0.3rem' }}>A4</b><br /><span style={{ float: 'left', marginLeft: '0.3rem' }}>1366 x 768px</span>
          </li>
          <li style={{ width: '14%', border: '1px solid rgb(183, 183, 183)', borderRadius: '1rem', marginLeft: '0.8rem', float: 'left', lineHeight: '2rem' }}>
            <b style={{ float: 'left', marginLeft: '0.3rem' }}>A4</b><br /><span style={{ float: 'left', marginLeft: '0.3rem' }}>1366 x 768px</span>
          </li>
          <li style={{ width: '14%', border: '1px solid rgb(183, 183, 183)', borderRadius: '1rem', marginLeft: '0.8rem', float: 'left', lineHeight: '2rem' }}>
            <b style={{ float: 'left', marginLeft: '0.3rem' }}>A4</b><br /><span style={{ float: 'left', marginLeft: '0.3rem' }}>1366 x 768px</span>
          </li>
          <li style={{ width: '14%', border: '1px solid rgb(183, 183, 183)', borderRadius: '1rem', marginLeft: '0.8rem', float: 'left', lineHeight: '2rem' }}>
            <b style={{ float: 'left', marginLeft: '0.3rem' }}>A4</b><br /><span style={{ float: 'left', marginLeft: '0.3rem' }}>1366 x 768px</span>
          </li>
        </ul>
      </>,
    },
  ];
const navigate=useNavigate()
    const link =()=>{
      navigate('/pageslayout')
    }
  return (
    <div>
      <div>
        <Row>
          <Col span={8}><b>创建设计</b></Col>
          <Col span={1} push={14}>
            <Button type="primary" onClick={() => setVisible(true)}>
              自定义尺寸
              <Overlay visible={visible} onClick={() => setVisible(false)}
                style={{
                  height: '100%',
                  display: 'flex',
                  alignItems: 'center',
                  justifyContent: 'center',
                }}>
                <div style={{ width: "55%", height: "65%", backgroundColor: '#fff', borderRadius: 10 }} >
                  <NavBar
                    leftText="返回"
                    rightText="X"
                    onClickRight={() => setVisible(false)}
                  />
                  <Cell>
                    <div style={{ display: 'flex', alignItems: 'center' }}>
                      <Button style={{ margin: '1rem' }}><Input defaultValue='0623' style={{ flex: 1, width: '30px' }} /></Button>
                      <span>×</span>
                      <Button style={{ margin: '1rem' }}><Input defaultValue='0224' style={{ flex: 1, width: '30px' }} /></Button>
                      <Button >
                        <select style={{ border: 'none' }}>
                          <option value="px像素">px</option>
                          <option value="cm厘米">cm</option>
                          <option value="mm(毫米)">mm</option>
                          <option value="in英尺">in</option>
                        </select>
                      </Button>
                      <Button type="primary" style={{ margin: '1rem' }}>创建设计</Button>

                    </div>
                  </Cell>

                  <Tabs defaultActiveKey="1" items={itemstk} onChange={onChange} style={{ marginLeft: '1rem' }} />
                  <div
                    style={{
                      color: 'black'
                    }}
                    onClick={link}
                  >
                    <dl style={{ width: "22%", float: 'left', height: '120px', margin: '0.5rem', }}>
                      <dt style={{ background: '#f5f7fd', display: 'flex', justifyContent: 'center', alignItems: 'center', borderRadius: '5%', width: "100%", height: '100%' }}><img src="https://pub-cdn-oss.chuangkit.com/designKind/447" alt="" style={{ width: "0 auto", height: 'auto', maxWidth: '80%', maxHeight: '80%' }} /></dt>
                      <dd>1</dd>
                    </dl>
                    <dl style={{ width: "22%", float: 'left', height: '120px', margin: '0.5rem', }}>
                      <dt style={{ background: '#f5f7fd', display: 'flex', justifyContent: 'center', alignItems: 'center', borderRadius: '5%', width: "100%", height: '100%' }}><img src="https://pub-cdn-oss.chuangkit.com/designKind/216" alt="" style={{ width: "0 auto", height: 'auto', maxWidth: '80%', maxHeight: '80%' }} /></dt>
                      <dd>1</dd>
                    </dl>
                    <dl style={{ width: "22%", float: 'left', height: '120px', margin: '0.5rem', }}>
                      <dt style={{ background: '#f5f7fd', display: 'flex', justifyContent: 'center', alignItems: 'center', borderRadius: '5%', width: "100%", height: '100%' }}><img src="https://pub-cdn-oss.chuangkit.com/designKind/502" alt="" style={{ width: "0 auto", height: 'auto', maxWidth: '80%', maxHeight: '80%' }} /></dt>
                      <dd>1</dd>
                    </dl>
                    <dl style={{ width: "22%", float: 'left', height: '120px', margin: '0.5rem', }}>
                      <dt style={{ background: '#f5f7fd', display: 'flex', justifyContent: 'center', alignItems: 'center', borderRadius: '5%', width: "100%", height: '100%' }}><img src="https://pub-cdn-oss.chuangkit.com/designKind/209" alt="" style={{ width: "0 auto", height: 'auto', maxWidth: '80%', maxHeight: '80%' }} /></dt>
                      <dd>3</dd>
                    </dl>
                  </div>
                </div>
              </Overlay>
            </Button>
          </Col>
        </Row>
        <Tabs defaultActiveKey="1" items={items} onChange={onChange} />


      </div>
    </div >
  )
}

export default Create
